<template>
    <div class="foodManage">
        <CommonTabs :tabList="tabList" v-model="activeName"></CommonTabs>
        <div class="foodManageContent">
            <div class="search">
                <el-form :model="searchForm" label-width="80px" :inline="true" ref="form">
                    <el-form-item prop="name" label="物品名称">
                        <CommonInput v-model="searchForm.name" :placeholder="'请输入物品名称'"></CommonInput>
                    </el-form-item>
                    <el-form-item prop="category" label="物品分类">
                        <CommonSelect v-model="searchForm.category" :options="options" :placeholder="'请选择物品分类'">
                        </CommonSelect>
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="handleSearch">搜索</el-button>
                        <el-button @click="handleReset">重置</el-button>
                        <el-button @click="handleAddFood">新增</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <CommonTable :columns="inventoryManageColumns" :table-data="tableData" :pagination="pagination"
                style="flex: 1">

                <template #img="{ row }">
                    <!-- <img class="row-img" :src="assetsUrl + row.imageUrl" alt=""> -->
                    <el-image style="width: 100px; height: 100px" :src="assetsUrl + row.imageUrl"
                        :preview-src-list="[assetsUrl + row.imageUrl]" :fit="'fill'"></el-image>
                </template>
                <template #edit="{ row }">
                    <el-button type="text" class="edit" @click="handleEdit(row)">编辑</el-button>
                    <el-button type="text" class="del" @click="handleDel(row)">删除</el-button>
                </template>
            </CommonTable>
        </div>
        <changeDialog v-if="changeDialogShow" :changeDialogShow.sync="changeDialogShow" :curRow="curRow"
            :options="options" @makeSure="handleMakeSure">
        </changeDialog>
        <delDialog v-if="delShow" :delShow.sync="delShow" @makeSure="makeSure" :width="'100'"></delDialog>
    </div>
</template>

<script>
import { inventoryManageColumns } from "./columns"
import changeDialog from "./components/changeDialog.vue"
import delDialog from "./components/delDialog.vue"
import utils from "@/utils/index"
// 接口
import { addItemInfo, getTablePage, delItemInfo } from "@/api/inventoryManage"
export default {
    components: {
        changeDialog,
        delDialog
    },
    data() {
        return {
            name: '',
            assetsUrl: '',
            searchForm: {
                name: '',
                category: '',
            },
            tableData: [

            ],
            // 分页器信息
            pagination: {
                pageNum: 1,
                pageSize: 10,
                total: 10,
            },
            tabList: [
                {
                    label: '库存管理',
                    name: 'inventoryManage',
                }
            ],
            activeName: 'inventoryManage',
            inventoryManageColumns,//表头列
            categoryList: [

            ],
            changeDialogShow: false,
            curRow: {},
            delShow: false,
            tableData: [],
            options: [
                {
                    label: '消耗品',
                    value: '消耗品'
                },
                {
                    label: '食材',
                    value: '食材'
                }
            ]
        };
    },

    mounted() {
        this.getTableData()
    },

    methods: {
        // 获取菜品分类
        async getCategoryList() {
            const res = await categoryList()
            this.categoryList = res.data.map(item => {
                return {
                    label: item,
                    value: item
                }
            })
        },
        async getTableData() {
            let data = {
                page: {
                    ...this.pagination
                },
                param: {
                    name: this.searchForm.name,
                    category: this.searchForm.category,
                }
            }
            console.log(data, 'data');

            const res = await getTablePage(data)
            console.log(res.data.records, 'rr');
            this.tableData = res.data.records
            this.pagination.total = res.data.total * 1
        },
        setPage(v) {
            this.pagination.pageNum = v
            this.getTableData()
        },
        setSize(v) {
            this.pagination.pageNum = 1
            this.pagination.pageSize = v
            this.getTableData()
        },
        handleAddFood() {
            this.curRow = {}
            this.changeDialogShow = true
        },
        handleEdit(row) {
            this.curRow = row
            this.changeDialogShow = true
        },
        handleDel(row) {
            this.curRow = row
            this.delShow = true
        },
        async makeSure() {
            console.log(this.curRow);

            const res = await delItemInfo({
                id: this.curRow.id
            })
            if (res.code == 200) {
                utils._msgBox('删除成功！', 'success')
                this.getTableData()
            } else {
                utils._msgBox('删除失败！', 'error')

            }
        },
        async handleMakeSure(v) {
            this.changeDialogShow = false
            const res = await addItemInfo(v)
            console.log(res, 'res');
            if (res.code == 200) {
                utils._msgBox(`${v.id ? '编辑' : '新增'}菜品成功！`, 'success')
                this.getTableData()
            } else {
                utils._msgBox(`${v.id ? '编辑' : '新增'}菜品失败！`, 'error')
            }
            this.getTableData()

        },
        handleSearch() {
            this.getTableData()
        },
        handleReset() {
            this.$refs.form.resetFields();
            this.getTableData()
        }
    },
};
</script>

<style lang="less" scoped>
.foodManage {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .foodManageContent {
        flex: 1;
        display: flex;
        flex-direction: column;

        .ing {
            color: rgb(34, 202, 104);
        }

        .stop {
            color: #e75511;
        }

        .row-img {
            width: 100px;
            height: 100px;

        }

        .title {
            line-height: 25px;
            padding: 16px 0 12px 0;
            text-align: center;
            font-size: 18px;
            font-weight: bolder;
        }

        .search {
            padding: 0 24px;

            .el-button {
                width: 74px;
                height: 32px;
                padding: 0;
                text-align: center;
                background: #155bd4;
                border-radius: 2px;
                border: 1px solid #dcdee0;
                color: #fff;

                span {
                    line-height: 32px;
                }

                &:hover {
                    // color: #155bd4;
                    // background: #edf4ff;
                    border: 1px solid #155bd4;
                }
            }
        }

        .el-table__row {
            .activeText {
                cursor: pointer;
                // color: var(--active-text-color);
            }
        }
    }
}
</style>